<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <div
        style="display: flex; flex-direction: column; gap: 10px; width: 100%"
      >
        <div>
          <t-date-time
            dateType="datetime"
            label="日期时间"
            labelPosition="left"
            placeholder="placeholder"
            v-model="date1"
            displayFormatWithDateTime="YYYY/MM/DD HH:mm"
            ref="dateTime"
            minDate="2024/04/01"
            maxDate="2024/04/10"
          />
        </div>
        <div>
          <t-date-time
            labelPosition="left"
            label="日期"
            dateType="date"
            v-model="date2"
            displayFormatWithDate="YYYY/MM/DD"
            minDate="2024/04/01"
            maxDate="2024/04/10"
          />
        </div>
        <div>
          <t-date-time
            label="时间"
            dateType="time"
            v-model="date3"
            labelPosition="left"
            :elTimePickerOptions="{
              disabledHours: disabledHours,
              disabledMinutes: disabledMinutes,
              disabledSeconds: disabledSeconds,
            }"
          />
        </div>
        <div>
          <t-date-time
            label="时间选择"
            dateType="timeselect"
            labelPosition="left"
            v-model="date4"
            start="00:00"
            step="00:30"
            end="23:30"
            :elTimeSelectOptions="{
              maxTime: '20:30’',
              minTime: '08:30’',
            }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

let dateTime = ref();
let date1 = ref('2024-04-01 17:30:00');
let date2 = ref('2024-04-01');
let date3 = ref('17:30:00');
let date4 = ref('15:00')
const makeRange = (start: number, end: number) => {
  const result: number[] = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
};
const disabledHours = () => {
  return makeRange(0, 16).concat(makeRange(19, 23));
};
const disabledMinutes = (hour: number) => {
  if (hour === 17) {
    return makeRange(0, 29);
  }
  if (hour === 18) {
    return makeRange(31, 59);
  }
};
const disabledSeconds = (hour: number, minute: number) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59);
  }
};
</script>
